<script setup lang="ts">
// 引入layout组件
import Layout from '../../components/layout.vue';
// 引入frame组件
import Frame from './frame.vue';
// 引入左上组件
import LeftTop from "./components/LeftTop.vue"
// 引入左中组件
import LeftCentent from './components/LeftCentent.vue';
// 引入左下组件
import LeftBottom from "./components/LeftBottom.vue"
// 引入右边组件
import RightContent from "./components/RightContent.vue"
// 引入中间组件
import CententAnimation from "./components/CententAnimation.vue"
</script>

<template>

    <div class="container">
        <div class="top">

        </div>
        <Layout>
            <!-- 左边数据 -->
            <template #left>
                <!-- 左上内容 -->
                <left-top></left-top>
                <!-- 左中内容 -->
                <left-centent></left-centent>
                <!-- 左下内容 -->
                <left-bottom></left-bottom>
            </template>

            <!-- 中间数据 -->

            <template #centent>
                <!-- 中间内容 -->
                <centent-animation></centent-animation>
            </template>

            <!-- 右边数据 -->

            <template #right>
                <!-- 右边内容 -->
                <right-content></right-content>

            </template>
        </Layout>
    </div>

</template>

<style scoped lang="scss">
.container {
    width: 100vw;
    height: 100vh;
    background: url(../../assets/layout/pageBg.png) 0 0 / 100% 100%;
    position: relative;

    .top {
        width: 100vw;
        height: 80px;
        background: url(../../assets/layout/Top.png) 0 0 / 100% 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 999;
    }
}
</style>